<template>
  <div class="page-header-index-wide">
    <a-spin :spinning="confirmLoading" tip="正在加载中,请耐心等待...">
      <a-row style="padding: 15px 0">
        <j-search-select-tag
          style="width: 150px; margin-left: 15px"
          v-model="personTypeId"
          @change="getWorkType"
          placeholder="请选择部门"
        >
          <template v-slot>
            <a-select-option v-for="(item, index) in secOptions" :key="index" :value="item.value"
              >{{ item.label }}
            </a-select-option>
            <!--
          <a-select-option key="1" value="1"><span>本人</span></a-select-option>
          <a-select-option key="2" value="2"><span>本BU</span></a-select-option>
          <a-select-option
            v-if="ownerUserId == '13701378791' || ownerUserId == '13916479883' || ownerUserId == '13911774478'"
            key="allData"
            value="allData"
            >全国</a-select-option
          >
          <a-select-option v-for="(item, index) in childMap" :key="index" :value="item.userLoginId"
            >{{ item.name }}
          </a-select-option>
          <a-select-option v-for="(item, index) in buList" :key="index" :value="item.key"
            >{{ item.text }}
          </a-select-option>
          -->
          </template>
        </j-search-select-tag>
        <a-select v-model="dateTypeId" style="width: 250px; margin-left: 15px" @change="getWorkType">
          <a-select-option value="1">今天</a-select-option>
          <a-select-option value="2">本周</a-select-option>
          <a-select-option value="3">本月</a-select-option>
          <a-select-option value="4">本年</a-select-option>
          <a-select-option value="all">全部</a-select-option>
          <a-select-option value="5">自选范围</a-select-option>
        </a-select>
        <a-range-picker :value="dateInterval" format="YYYY-MM-DD" style="margin-left: 10px" @change="changeDate" />
      </a-row>

      <div class="brief-box">
        <div class="brief-title">
          <span class="icon wk wk-briefing" />
          <span class="text">销售看板</span>
        </div>
        <div class="brief">
          <div v-for="(item, index) in briefList" :key="index" :span="2" class="brief-item" @click="reportClick(item)">
            <div class="brief-item__body">
              <div :style="{ backgroundColor: item.color }" class="icon-box">
                <span :class="item.icon" class="icon wk" />
              </div>
              <div class="info">
                <div class="title">
                  {{ item.label }}
                </div>
                <div style="fontsize: 24px" class="number">
                  {{ item.num ? item.num : '0' }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 公告 -->
      <div class="notice-box" style="margin-top: 18px">
        <div class="notice-title">
          <div class="left">
            <span class="icon wk wk-message" />
            <span class="text">公告</span>
          </div>
          <div class="right">
            <a-carousel autoplay :dots="false">
              <div v-for="item in noticeData" class="notciediv" :key="item.id" @click="showDetailNotice(item)">
                <a-row>
                  <a-col :span="4">时间：{{ item.createTime }}</a-col>
                  <a-col :span="4">|</a-col>
                  <a-col :span="8"
                    >标题：{{ item.title.length > 20 ? item.title.substr(0, 20) + '...' : item.title }}</a-col
                  >
                  <a-col :span="4">|</a-col>
                  <a-col :span="4">发布人：{{ item.createUserId_dictText }}</a-col>
                </a-row>
              </div>
              <p v-if="noticeData.length == 0" style="text-align: center">暂无公告</p>
            </a-carousel>
          </div>
        </div>
      </div>

      <div class="section">
        <div class="left">
          <div class="card left-content">
            <div class="card-title">
              <span class="icon wk wk-data"></span>
              <div class="card-title-center text-one-ellipsis">全国空位表</div>
            </div>
            <div>
              <a-table :scroll="{ y: 400 }" :columns="fieldList" :data-source="tableList" bordered :pagination="false">
              </a-table>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="card left-content">
            <div class="card-title">
              <span class="icon wk wk-hollow-results"></span>
              <div class="card-title-center text-one-ellipsis">
                活跃商机排行榜（ {{ dateInterval[0] ? dateInterval[0].substr(0, 10) : '-' }} ~
                {{ dateInterval[1] ? dateInterval[1].substr(0, 10) : '-' }}）
              </div>
              <a-radio-group v-model="rankTypeId" :style="{ marginBottom: '8px', marginLeft: '10px' }">
                <a-radio-button value="1"> 按仓库 </a-radio-button>
                <a-radio-button value="2">按人员 </a-radio-button>
                <a-radio-button value="3"> 按BU </a-radio-button>
              </a-radio-group>
            </div>
            <div>
              <a-table
                v-if="rankTypeId == '1'"
                :scroll="{ y: 438 }"
                :columns="columnsInv"
                :data-source="invDataList"
                bordered
                :pagination="false"
              ></a-table>
              <a-table
                v-if="rankTypeId == '2'"
                :scroll="{ y: 438 }"
                :columns="columnsPer"
                :data-source="personDataList"
                bordered
                :pagination="false"
              ></a-table>
              <a-table
                v-if="rankTypeId == '3'"
                :scroll="{ y: 438 }"
                :columns="columnsBu"
                :data-source="buDataList"
                bordered
                :pagination="false"
              ></a-table>
            </div>
          </div>
        </div>
      </div>

      <j-modal
        :title="crmdoTitle"
        width="70%"
        :visible="crmdoVisible"
        :maskClosable="false"
        :confirmLoading="false"
        switchFullscreen
        @cancel="crmdoVisible = false"
      >
        <template slot="footer">
          <a-button key="submit" type="default" @click="crmdoVisible = false"> 关闭 </a-button>
        </template>
        <a-table
          ref="table"
          size="middle"
          bordered
          rowKey="id"
          :columns="crmdoColumns"
          :dataSource="crmdoDataSource"
          :pagination="false"
          :loading="false"
          :scroll="{ x: 1200, y: 500 }"
          class="j-table-force-nowrap"
        >
          <template slot="customerId_dictText" slot-scope="text, record">
            <a-tooltip placement="top">
              <template slot="title">
                <span>{{ record.customerId_dictText }}</span>
              </template>
              <span class="ellipsis">{{ record.customerId_dictText }}</span>
            </a-tooltip>
          </template>
          <template slot="businessName" slot-scope="text, record">
            <a-tooltip placement="top">
              <template slot="title">
                <span>{{ record.businessName }}</span>
              </template>
              <span class="ellipsis">{{ record.businessName }}</span>
            </a-tooltip>
          </template>
          <template slot="htmlSlot" slot-scope="text">
            <div v-html="text"></div>
          </template>
          <template slot="imgSlot" slot-scope="text">
            <span v-if="!text" style="font-size: 12px; font-style: italic">无图片</span>
            <img
              v-else
              :src="getImgView(text)"
              height="25px"
              alt=""
              style="max-width: 80px; font-size: 12px; font-style: italic"
            />
          </template>
        </a-table>
      </j-modal>

      <a-modal title="公告" :width="600" :visible="noticeVisible" :footer="null" @cancel="noticeVisible = false">
        <p style="white-space: pre-wrap">{{ noticeValue.description }}</p>
        <p style="text-align: right">{{ noticeValue.createTime }}</p>
        <p style="text-align: right">{{ noticeValue.createUserId_dictText }}</p>
      </a-modal>
    </a-spin>
  </div>
</template>

<script>
import { httpAction, getAction } from '@/api/manage'
import * as echarts from 'echarts'
import { mapGetters } from 'vuex'
import JSearchSelectTag from '@/components/dict/JSearchSelectTag'
import moment from 'moment'
import Vue from 'vue'
function number_format(number, decimals, dec_point, thousands_sep) {
  /*
   * 参数说明：
   * number：要格式化的数字
   * decimals：保留几位小数
   * dec_point：小数点符号
   * thousands_sep：千分位符号
   * */
  number = (number + '').replace(/[^0-9+-Ee.]/g, '')
  var n = !isFinite(+number) ? 0 : +number,
    prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
    sep = typeof thousands_sep === 'undefined' ? ',' : thousands_sep,
    dec = typeof dec_point === 'undefined' ? '.' : dec_point,
    s = '',
    toFixedFix = function (n, prec) {
      var k = Math.pow(10, prec)
      return '' + Math.ceil(n * k) / k
    }

  s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.')
  var re = /(-?\d+)(\d{3})/
  while (re.test(s[0])) {
    s[0] = s[0].replace(re, '$1' + sep + '$2')
  }

  if ((s[1] || '').length < prec) {
    s[1] = s[1] || ''
    s[1] += new Array(prec - s[1].length + 1).join('0')
  }
  return s.join(dec)
}
export default {
  name: 'IndexChart',
  components: {
    JSearchSelectTag,
  },
  data() {
    return {
      confirmLoading: true,
      secOptions: [],
      noticeVisible: false,
      noticeValue: '',
      ownerUserId: this.userInfo().userLoginId,
      personTypeId: null,
      dateTypeId: 'all',
      dateInterval: [],
      fromDateTothurDate: '',
      buId: '',
      workMap: {},
      childMap: [],
      buList: [],
      crmdoTitle: '',
      crmdoVisible: false,
      crmdoColumns: [],
      crmdoColumns1: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
          fixed: 'left',
        },
        {
          title: '商机名称',
          align: 'center',
          dataIndex: 'businessName',
          scopedSlots: { customRender: 'businessName' },
          ellipsis: true,
        },
        {
          title: '客户名称',
          align: 'center',
          dataIndex: 'customerId_dictText',
          scopedSlots: { customRender: 'customerId_dictText' },
          ellipsis: true,
        },
        {
          title: '商机状态',
          align: 'center',
          dataIndex: 'infoStatusId_dictText',
        },
        {
          title: '客户经理',
          align: 'center',
          dataIndex: 'ownerUserId_dictText',
          ellipsis: true,
        },
        {
          title: '商机类型',
          align: 'center',
          dataIndex: 'typeId_dictText',
        },
        {
          title: '商机金额',
          align: 'center',
          dataIndex: 'estimatedSalesAmount',
          customRender: function (t, r, index) {
            return number_format(t, 0, '.', ',')
          },
        },
        {
          title: '仓库',
          align: 'center',
          dataIndex: 'warehouseName',
          ellipsis: true,
        },
        {
          title: '冷冻销售',
          align: 'center',
          sorter: (a, b) => a.estimatedFreeze - b.estimatedFreeze,
          dataIndex: 'estimatedFreeze',
          customRender: function (t, r, index) {
            return number_format(t, 0, '.', ',')
          },
        },
        {
          title: '冷藏销售',
          align: 'center',
          sorter: (a, b) => a.estimatedRefrigerate - b.estimatedRefrigerate,
          dataIndex: 'estimatedRefrigerate',
          customRender: function (t, r, index) {
            return number_format(t, 0, '.', ',')
          },
        },
        {
          title: '恒温销售',
          align: 'center',
          sorter: (a, b) => a.estimatedConstant - b.estimatedConstant,
          dataIndex: 'estimatedConstant',
          customRender: function (t, r, index) {
            return number_format(t, 0, '.', ',')
          },
        },
        {
          title: '常温销售',
          align: 'center',
          sorter: (a, b) => a.estimatedNormal - b.estimatedNormal,
          dataIndex: 'estimatedNormal',
          customRender: function (t, r, index) {
            return number_format(t, 0, '.', ',')
          },
        },
        {
          title: '商机阶段',
          align: 'center',
          dataIndex: 'statusId_dictText',
        },
        {
          title: '更新时间',
          align: 'center',
          width: 150,
          dataIndex: 'updateTime',
          customRender: function (t, r, index) {
            if (t) {
              return t.substr(0, 10)
            }
          },
          ellipsis: true,
        },
      ],
      crmdoColumns2: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
          fixed: 'left',
        },
        {
          title: '客户名称',
          align: 'center',
          dataIndex: 'customerName',
          ellipsis: true,
        },
        {
          title: '关联客户',
          align: 'center',
          dataIndex: 'relatedCustomer_dictText',
          ellipsis: true,
        },
        {
          title: '客户经理',
          align: 'center',
          dataIndex: 'ownerUserId_dictText',
          ellipsis: true,
        },
        // {
        //   title: '产品品类',
        //   align: 'center',
        //   dataIndex: 'productCategory_dictText',
        //   ellipsis: true,
        // },
        {
          title: '客户状态',
          align: 'center',
          dataIndex: 'infoStatusId_dictText',
          ellipsis: true,
        },
        {
          title: '商机类型',
          align: 'center',
          dataIndex: 'businessTypId_dictText',
          ellipsis: true,
        },
        {
          title: '商机金额',
          align: 'center',
          dataIndex: 'businessTotalAmount',
          ellipsis: true,
          customRender: function (t, r, index) {
            return number_format(t, 0, '.', ',')
          },
        },
        {
          title: '全温区需求（板数）',
          align: 'center',
          dataIndex: 'estimatedAll',
          ellipsis: true,
          customRender: function (t, r, index) {
            return number_format(t, 0, '.', ',')
          },
        },
        {
          title: '更新时间',
          align: 'center',
          width: 150,
          dataIndex: 'updateTime',
          customRender: function (t, r, index) {
            if (t) {
              return t.substr(0, 10)
            }
          },
          ellipsis: true,
        },
      ],
      crmdoDataSource: [],
      fieldList: [
        {
          title: '部门',
          align: 'center',
          dataIndex: 'warehouseName',
          key: 'warehouseName',
          width: 100,
          ellipsis: true,
        },
        {
          title: '空库位',
          align: 'center',
          children: [
            {
              title: '冷冻',
              align: 'center',
              dataIndex: 'availableFreeze',
              key: 'availableFreeze',
            },
            {
              title: '冷藏',
              align: 'center',
              dataIndex: 'availableRefrigerate',
              key: 'availableRefrigerate',
            },
            {
              title: '恒温',
              align: 'center',
              dataIndex: 'availableConstant',
              key: 'availableConstant',
              width: 100,
            },
            {
              title: '常温',
              align: 'center',
              dataIndex: 'availableNormal',
              key: 'availableNormal',
            },
            {
              title: '全温区',
              align: 'center',
              dataIndex: 'availableTotal',
              key: 'availableTotal',
            },
          ],
        },
      ],
      tableList: [],
      briefListAllNew: [
        {
          id: 1,
          label: '活跃客户',
          type: 'activeCustomerNum',
          field: 'activeCustomerNum',
          icon: 'wk-customer',
          num: '',
          color: '#168a40',
          link: '/crm/customer',
          showType: 1,
        },
        {
          id: 2,
          label: '活跃商机',
          type: 'activeBusinessNum',
          field: 'activeBusinessNum',
          icon: 'wk-customer',
          num: '',
          color: '#FB9323',
          showType: 2,
        },
        {
          id: 3,
          label: '新签金额',
          type: 'successCrmBusinessTotalAmount',
          field: 'successCrmBusinessTotalAmount',
          icon: 'wk-icon-opportunities',
          num: '',
          color: '#AD5CFF',
          link: '/crm/business',
          showType: 2,
        },
        {
          id: 4,
          label: '新签合同',
          type: 'successCrmBusinessNum',
          field: 'successCrmBusinessNum',
          icon: 'wk-business',
          num: '',
          color: '#4A5BFD',
          showType: 2,
        },
        {
          id: 5,
          label: '沉默客户',
          type: 'sixMonthCrmCustomerNum',
          field: 'sixMonthCrmCustomerNum',
          icon: 'wk-business',
          num: '',
          color: '#AD5CFF',
          link: '/crm/business',
          showType: 1,
        },
        {
          id: 6,
          label: '沉默商机',
          type: 'sixMonthCrmBusinessNum',
          field: 'sixMonthCrmBusinessNum',
          icon: 'wk-record',
          num: '',
          color: '#4A5BFD',
          showType: 2,
        },
        {
          id: 7,
          label: '活跃商机金额',
          type: 'newCrmBusinessTotalAmount',
          field: 'newCrmBusinessTotalAmount',
          icon: 'wk-receivables',
          num: '',
          color: '#FB9323',
          showType: 2,
        },
        {
          id: 8,
          label: '新增客户',
          type: 'newCrmCustomerNum',
          field: 'newCrmCustomerNum',
          icon: 'wk-icon-opportunities',
          num: '',
          color: '#AD5CFF',
          showType: 1,
        },
      ],
      // 完成率
      data: {
        achievementMoneys: 0,
        contractMoneys: 0,
        receivablesMoneys: 0,
      },
      // rankingColumns,
      rankingData: [],
      loading: true,
      url: {
        getCrmDashBoardData: '/online/api/getCrmDashBoardData',
        getCrmChildParty: '/online/api/getCrmChildParty',
        crmBusinessCustRanking: '/online/api/crmBusinessCustRanking',
        getCrmWmsDataReport: '/online/api/getCrmWmsDataReport',
        pagingCrmNotice: '/online/api/pagingCrmNotice',
        selectNowUserBySecurityGroup: '/online/api/selectNowUserBySecurityGroup',
      },

      rankTypeId: '1',
      columnsPer: [
        {
          title: '排行',
          dataIndex: '',
          key: 'rowIndex',
          width: 100,
          align: 'center',
          customRender: function (t, r, index) {
            if (r.rank == '汇总') {
              return '汇总'
            } else {
              return parseInt(index) + 1
            }
          },
        },
        {
          title: '人员',
          dataIndex: 'personName',
          align: 'center',
        },
        {
          title: '所属BU',
          dataIndex: 'buName',
          align: 'center',
        },
        {
          title: '商机金额',
          dataIndex: 'estimatedSalesAmount',
          align: 'center',
          customRender: function (t, r, index) {
            return number_format(r.estimatedSalesAmount, 0, '.', ',')
          },
        },
      ],
      personDataList: [],
      columnsBu: [
        {
          title: '排行',
          dataIndex: '',
          key: 'rowIndex',
          width: 100,
          align: 'center',
          customRender: function (t, r, index) {
            if (r.rank == '汇总') {
              return '汇总'
            } else {
              return parseInt(index) + 1
            }
          },
        },
        {
          title: 'BU',
          dataIndex: 'buName',
          align: 'center',
        },
        {
          title: '商机金额',
          dataIndex: 'estimatedSalesAmount',
          align: 'center',
          customRender: function (t, r, index) {
            return number_format(r.estimatedSalesAmount, 0, '.', ',')
          },
        },
      ],
      buDataList: [],
      columnsInv: [
        {
          title: '排行',
          dataIndex: '',
          key: 'rowIndex',
          width: 100,
          align: 'center',
          customRender: function (t, r, index) {
            if (r.rank == '汇总') {
              return '汇总'
            } else {
              return parseInt(index) + 1
            }
          },
        },
        {
          title: '仓库',
          dataIndex: 'warehouseName',
          align: 'center',
        },
        {
          title: '商机金额',
          dataIndex: 'estimatedSalesAmount',
          align: 'center',
          customRender: function (t, r, index) {
            return number_format(r.estimatedSalesAmount, 0, '.', ',')
          },
        },
      ],
      invDataList: [],
      // 公告
      noticeData: [],
    }
  },
  computed: {
    briefList() {
      let resArr = [
        {
          id: 1,
          label: '活跃客户',
          type: 'activeCustomerNum',
          field: 'activeCustomerNum',
          icon: 'wk-customer',
          num: '',
          color: '#168a40',
          link: '/crm/customer',
          showType: 1,
        },
        {
          id: 2,
          label: '活跃商机',
          type: 'activeBusinessNum',
          field: 'activeBusinessNum',
          icon: 'wk-customer',
          num: '',
          color: '#FB9323',
          showType: 2,
        },
        {
          id: 3,
          label: '新签金额',
          type: 'successCrmBusinessTotalAmount',
          field: 'successCrmBusinessTotalAmount',
          icon: 'wk-icon-opportunities',
          num: '',
          color: '#AD5CFF',
          link: '/crm/business',
          showType: 2,
        },
        {
          id: 4,
          label: '新签合同',
          type: 'successCrmBusinessNum',
          field: 'successCrmBusinessNum',
          icon: 'wk-business',
          num: '',
          color: '#4A5BFD',
          showType: 2,
        },
      ]
      let resArr2 = [
        {
          id: 1,
          label: '活跃客户',
          type: 'activeCustomerNum',
          field: 'activeCustomerNum',
          icon: 'wk-customer',
          num: '',
          color: '#168a40',
          link: '/crm/customer',
          showType: 1,
        },
        {
          id: 2,
          label: '活跃商机',
          type: 'activeBusinessNum',
          field: 'activeBusinessNum',
          icon: 'wk-customer',
          num: '',
          color: '#FB9323',
          showType: 2,
        },
        {
          id: 3,
          label: '新签金额',
          type: 'successCrmBusinessTotalAmount',
          field: 'successCrmBusinessTotalAmount',
          icon: 'wk-icon-opportunities',
          num: '',
          color: '#AD5CFF',
          link: '/crm/business',
          showType: 2,
        },
        {
          id: 4,
          label: '新签合同',
          type: 'successCrmBusinessNum',
          field: 'successCrmBusinessNum',
          icon: 'wk-business',
          num: '',
          color: '#4A5BFD',
          showType: 2,
        },
        // {
        //   id: 5,
        //   label: '沉默客户',
        //   type: 'sixMonthCrmCustomerNum',
        //   field: 'sixMonthCrmCustomerNum',
        //   icon: 'wk-business',
        //   num: '',
        //   color: '#AD5CFF',
        //   link: '/crm/business',
        //   showType: 1,
        // },
        // {
        //   id: 6,
        //   label: '沉默商机',
        //   type: 'sixMonthCrmBusinessNum',
        //   field: 'sixMonthCrmBusinessNum',
        //   icon: 'wk-record',
        //   num: '',
        //   color: '#4A5BFD',
        //   showType: 2,
        // },
        {
          id: 7,
          label: '活跃商机金额',
          type: 'newCrmBusinessTotalAmount',
          field: 'newCrmBusinessTotalAmount',
          icon: 'wk-receivables',
          num: '',
          color: '#FB9323',
          showType: 2,
        },
        {
          id: 8,
          label: '新增客户',
          type: 'newCrmCustomerNum',
          field: 'newCrmCustomerNum',
          icon: 'wk-icon-opportunities',
          num: '',
          color: '#AD5CFF',
          showType: 1,
        },
      ]
      resArr.forEach((item) => {
        this.briefListAllNew.forEach((item2) => {
          if (item.field == item2.field) {
            item.num = item2.num
            item.dataList = item2.dataList
          }
        })
      })
      resArr2.forEach((item) => {
        this.briefListAllNew.forEach((item2) => {
          if (item.field == item2.field) {
            item.num = item2.num
            item.dataList = item2.dataList
          }
        })
      })
      let groupId = Vue.ls.get('Login_Userinfo').groupId
      if (groupId === '4215') {
        return resArr
      } else if (groupId === '4214') {
        return this.briefListAllNew
      } else {
        return resArr2
      }
    },
  },
  created() {
    this.loading = !this.loading
    this.selectSec()
    this.getChildData()
    this.getNoticeData()
    this.getStockweekData()
  },
  methods: {
    ...mapGetters(['userInfo']),
    selectSec() {
      const param = {}
      getAction(this.url.selectNowUserBySecurityGroup, param).then((res) => {
        if (res.success) {
          this.secOptions = res.result.list
          res.result.list.forEach((item) => {
            if (item.default && item.default === 'Y') {
              this.personTypeId = item.value
            }
          })
          this.getWorkType()
        }
      })
    },
    getStockweekData() {
      const param = {}
      param.onlyBu = 'N'
      getAction(this.url.getCrmWmsDataReport, param).then((res) => {
        if (res.success) {
          this.tableList = res.result.workMap.dataListByWarehouse
        }
      })
    },
    getNoticeData() {
      const param = {}
      param.isDisplay = 'Y'
      param.pageSize = 5
      param.orderBy = '-createTime'
      getAction(this.url.pagingCrmNotice, param).then((res) => {
        if (res.success) {
          this.noticeData = res.result.records || []
        }
      })
    },
    showDetailNotice(data) {
      this.noticeValue = data
      this.noticeVisible = true
    },
    getChildData() {
      getAction(this.url.getCrmChildParty, null).then((res) => {
        this.childMap = res.result.childMap || []
      })
      getAction(
        '/online/dict/getDictItems/DataDictionary,description,dictionaryCode,dictionaryTypeId=BU_DEPARTMENT',
        {}
      ).then((res) => {
        if (
          this.ownerUserId == '13701378791' ||
          this.ownerUserId == '13916479883' ||
          this.ownerUserId == '13911774478'
        ) {
          this.buList = res.result || []
        }
      })
    },
    // 筛选
    getWorkType() {
      const param = {}
      // if ((typeof dateInterval) == 'object') {
      param.createTime_fld0_value = this.dateInterval[0]
      param.createTime_fld1_value = this.dateInterval[1]
      // }
      param.personTypeId = this.personTypeId
      param.dateTypeId = this.dateTypeId
      getAction(this.url.getCrmDashBoardData, param)
        .then((res) => {
          this.workMap = res.result.workMap || {}
          this.dateInterval = [res.result.workMap.fromDate, res.result.workMap.thruDate]
          this.briefListAllNew[0].num = this.workMap.activeCustomerNum
          this.briefListAllNew[0].dataList = this.workMap.activeCustomerList
          this.briefListAllNew[1].num = this.workMap.activeBusinessNum
          this.briefListAllNew[1].dataList = this.workMap.activeBusinessList
          this.briefListAllNew[2].num = this.number_format(this.workMap.successCrmBusinessTotalAmount, 0, '.', ',')
          this.briefListAllNew[2].dataList = this.workMap.successCrmBusinessTotalAmountList
          this.briefListAllNew[3].num = this.workMap.successCrmBusinessNum
          this.briefListAllNew[3].dataList = this.workMap.successCrmBusinessList
          this.briefListAllNew[4].num = this.workMap.sixMonthCrmCustomerNum
          this.briefListAllNew[4].dataList = this.workMap.sixMonthCrmCustomerList
          this.briefListAllNew[5].num = this.workMap.sixMonthCrmBusinessNum
          this.briefListAllNew[5].dataList = this.workMap.sixMonthCrmBusinessList
          this.briefListAllNew[6].num = this.number_format(this.workMap.newCrmBusinessTotalAmount, 0, '.', ',')
          this.briefListAllNew[6].dataList = this.workMap.newCrmBusinessTotalAmountList
          this.briefListAllNew[7].num = this.workMap.newCrmCustomerNum
          this.briefListAllNew[7].dataList = this.workMap.newCrmCustomerList
          this.rankingData = res.result.receiveMoneyList

          this.personDataList = res.result.workMap.crmBusinessCustRankingMap.personDataList
          this.buDataList = res.result.workMap.crmBusinessCustRankingMap.buDataList
          this.invDataList = res.result.workMap.crmBusinessCustRankingMap.invDataList
          this.confirmLoading = false
        })
        .catch(() => {
          console.log('超时了')
        })
    },
    // 格式化金额
    number_format(number, decimals, dec_point, thousands_sep) {
      /*
       * 参数说明：
       * number：要格式化的数字
       * decimals：保留几位小数
       * dec_point：小数点符号
       * thousands_sep：千分位符号
       * */
      number = (number + '').replace(/[^0-9+-Ee.]/g, '')
      var n = !isFinite(+number) ? 0 : +number,
        prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
        sep = typeof thousands_sep === 'undefined' ? ',' : thousands_sep,
        dec = typeof dec_point === 'undefined' ? '.' : dec_point,
        s = '',
        toFixedFix = function (n, prec) {
          var k = Math.pow(10, prec)
          return '' + Math.ceil(n * k) / k
        }

      s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.')
      var re = /(-?\d+)(\d{3})/
      while (re.test(s[0])) {
        s[0] = s[0].replace(re, '$1' + sep + '$2')
      }

      if ((s[1] || '').length < prec) {
        s[1] = s[1] || ''
        s[1] += new Array(prec - s[1].length + 1).join('0')
      }
      return s.join(dec)
    },
    // 跳转页面
    reportClick(item) {
      if (item.showType == 1) {
        this.crmdoColumns = this.crmdoColumns2
      } else {
        this.crmdoColumns = this.crmdoColumns1
        if (item.id == '3' || item.id == '4') {
          this.crmdoColumns[13].title = '签约时间'
          this.crmdoColumns[13].dataIndex = 'status5Time'
        } else {
          this.crmdoColumns[13].title = '更新时间'
          this.crmdoColumns[13].dataIndex = 'updateTime'
        }
      }

      this.crmdoTitle = item.label
      this.crmdoDataSource = item.dataList
      this.crmdoVisible = true
      // }
    },
    // 待完善  起止日期选择
    changeDate(date, dateString) {
      if (dateString[0] == '' && dateString[1] == '') {
        this.dateTypeId = 'all'
      } else {
        this.dateTypeId = '5'
      }
      this.dateInterval = dateString
      this.getWorkType(dateString)
    },
  },
}
</script>

<style lang="less" scoped>
/deep/ .ant-table-thead > tr > th {
  color: rgba(0, 0, 0, 0.85);
  font-weight: 500;
  text-align: left;
  background: #fff;
  border-bottom: 1px solid #e8e8e8;
  transition: background 0.3s ease;
}

.notice-box {
  width: 100%;
  background-color: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  .notice-title {
    padding: 15px 20px;
    position: relative;
    .left {
      display: inline-block;
      width: 80px;
      .icon {
        color: #50cf9e;
        font-size: 18px;
      }
      .text {
        font-size: 16px;
        font-weight: 700;
        margin-left: 8px;
      }
    }
    .right {
      display: inline-block;
      position: absolute;
      top: 18px;
      width: 85%;
      .notciediv {
        position: relative;
        cursor: pointer;
        text-align: center;
      }
    }
  }
}
.brief-box {
  width: 100%;
  background-color: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  .brief-title {
    padding: 15px 20px 0;
    .icon {
      color: #50cf9e;
      font-size: 18px;
    }
    .text {
      font-size: 16px;
      font-weight: 700;
      margin-left: 8px;
    }
  }
  .brief {
    width: 100%;
    padding: 10px 10px 14px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    .brief-item {
      display: flex;
      align-items: center;
      cursor: pointer;
      width: calc(25% - 20px);
      height: 88px;
      box-shadow: 0 0 16px 0 rgba(0, 0, 0, 8%);
      border-radius: 4px;
      margin: 10px;
      &:hover {
        box-shadow: 0 0 16px 0 rgba(0, 0, 0, 20%);
      }
      .brief-item__body {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        align-items: center;
        overflow: hidden;
        .icon-box {
          width: 50px;
          height: 50px;
          line-height: 50px;
          text-align: center;
          border-radius: 50%;
          margin-right: 10px;
          margin-left: 15px;
          float: left;
          -ms-flex-negative: 0;
          flex-shrink: 0;
          .icon {
            color: #fff;
            font-size: 19px;
          }
        }
        .info {
          overflow: hidden;
          .title {
            font-size: 13px;
          }
          .number {
            font-size: 23px;
            font-weight: 700;
            line-height: 1;
            margin-top: 8px;
            margin-right: 5px;
            overflow: hidden;
          }
        }
      }
      .brief-item__others {
        position: relative;
        width: 100px;
        text-align: center;
        padding: 0 3px;
        overflow: hidden;
        &::before {
          position: absolute;
          top: 7.5%;
          left: 0;
          content: '';
          width: 1px;
          height: 85%;
          background-color: #e6e6e6;
          display: block;
        }
      }
    }
  }
}

.section {
  width: 100%;
  .card {
    background-color: #fff;
    border-radius: 4px;
    padding: 20px 12px 20px 16px;
    border: 1px solid #e6e6e6;
    margin-top: 18px;
    &:hover {
      box-shadow: 0 0 16px 0 rgba(0, 0, 0, 20%);
    }
    .card-title {
      display: flex;
      min-height: 40px;
      .icon {
        display: inline-block;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        color: #4983ef;
        font-size: 18px;
      }
      .card-title-center {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        font-size: 16px;
        font-weight: 700;
        margin-left: 5px;
      }
    }
  }
  .left {
    float: left;
    width: 50%;
    padding-right: 10px;
    /deep/ .ant-table-wrapper {
      min-height: 318px !important;
    }
    /deep/.ant-table-thead > tr > th,
    .ant-table-tbody > tr > td {
      padding: 8px 8px !important;
    }
    /deep/ .ant-table-tbody > tr > td {
      padding: 8px 8px !important;
    }
    .left-content {
      // height: 400px;
    }
  }
  .right {
    float: left;
    padding-left: 10px;
    width: 50%;
    /deep/ .ant-table-wrapper {
      min-height: 318px !important;
    }
    /deep/.ant-table-thead > tr > th,
    .ant-table-tbody > tr > td {
      padding: 8px 8px !important;
    }
    /deep/ .ant-table-tbody > tr > td {
      padding: 8px 8px !important;
    }
    .right-content {
      // height: 400px;
    }
  }
}
.card-desc {
  font-size: 12px;
  color: #666;
  line-height: 1;
  margin: 10px 0;
}

.brief {
  width: 100%;
  padding: 10px 10px 14px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  .brief-item {
    padding: 15px;
    display: flex;
    align-items: center;
    cursor: pointer;
    width: calc(33% - 20px);
    height: 88px;
    box-shadow: 0 0 16px 0 rgba(0, 0, 0, 8%);
    border-radius: 4px;
    margin: 10px;
    &:hover {
      box-shadow: 0 0 16px 0 rgba(0, 0, 0, 20%);
    }
    .brief-item__body {
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
      align-items: center;
      overflow: hidden;
      .info {
        overflow: hidden;
        .title {
          font-size: 13px;
        }
        .number {
          font-size: 18px !important;
          line-height: 1;
          margin-top: 8px;
          margin-right: 5px;
          overflow: hidden;
          span {
            font-size: 23px;
            font-weight: 700;
            line-height: 1;
            margin-top: 8px;
            color: #168a40;
          }
        }
      }
    }
    .brief-item__others {
      position: relative;
      width: 100px;
      text-align: center;
      padding: 0 3px;
      overflow: hidden;
      &::before {
        position: absolute;
        top: 7.5%;
        left: 0;
        content: '';
        width: 1px;
        height: 85%;
        background-color: #e6e6e6;
        display: block;
      }
    }
  }
}

.content {
  width: 100%;
  height: 300px;
  .list-item {
    border-bottom: 1px dashed #efefef;
    padding: 5px 20px;
    &:last-child {
      border-bottom: 0 none;
      padding-bottom: 0;
    }
    .title {
    }
    .info {
      .bold {
        font-size: 18px;
        font-weight: bold;
        margin: 0 3px;
      }
    }
  }
}
.ranking-content {
  width: 100%;
  height: 300px;
  position: relative;
  .title {
    font-size: 14px;
    color: #333;
    text-align: center;
    font-weight: bold;
    margin-bottom: 8px;
  }
}

#sales-funnel {
  width: 100%;
  height: 322px;
  margin-top: 10px;
}
#sale-statistics {
  width: 100%;
  height: 300px;
}
#performance-chart {
  width: 100%;
  height: 322px;
  margin-top: 10px;
}
</style>